export default function OrderPage() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-semibold mb-4">订单管理</h1>
      
      <div className="mb-6 grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-blue-50 border border-blue-100 rounded-lg p-4">
          <div className="text-blue-600 text-sm font-medium">待处理订单</div>
          <div className="text-2xl font-bold mt-2">24</div>
          <div className="text-blue-500 text-xs mt-1">较昨日 +12%</div>
        </div>
        <div className="bg-green-50 border border-green-100 rounded-lg p-4">
          <div className="text-green-600 text-sm font-medium">已完成订单</div>
          <div className="text-2xl font-bold mt-2">168</div>
          <div className="text-green-500 text-xs mt-1">较昨日 +5%</div>
        </div>
        <div className="bg-yellow-50 border border-yellow-100 rounded-lg p-4">
          <div className="text-yellow-600 text-sm font-medium">退款订单</div>
          <div className="text-2xl font-bold mt-2">7</div>
          <div className="text-yellow-500 text-xs mt-1">较昨日 -3%</div>
        </div>
        <div className="bg-purple-50 border border-purple-100 rounded-lg p-4">
          <div className="text-purple-600 text-sm font-medium">总收入</div>
          <div className="text-2xl font-bold mt-2">¥25,842.00</div>
          <div className="text-purple-500 text-xs mt-1">较昨日 +8%</div>
        </div>
      </div>
      
      <div className="bg-white rounded-lg shadow">
        <div className="p-4 flex justify-between items-center border-b">
          <div className="flex gap-3">
            <select className="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
              <option>全部状态</option>
              <option>待付款</option>
              <option>待发货</option>
              <option>已发货</option>
              <option>已完成</option>
              <option>已取消</option>
            </select>
            <input 
              type="date" 
              className="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <input 
              type="text" 
              placeholder="搜索订单..." 
              className="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <button className="bg-blue-500 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-600">
            导出订单
          </button>
        </div>
        
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                订单号
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                客户
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                日期
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                金额
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                状态
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {[1, 2, 3, 4, 5, 6, 7, 8].map((id) => (
              <tr key={id} className="hover:bg-gray-50">
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                  #ORD-{(20000 + id).toString()}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  客户{id}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  2023-04-{10 + id}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  ¥{(id * 120).toFixed(2)}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className={`px-2 py-1 text-xs font-semibold rounded-full
                    ${id % 4 === 0 ? 'bg-green-100 text-green-800' : 
                      id % 4 === 1 ? 'bg-yellow-100 text-yellow-800' : 
                      id % 4 === 2 ? 'bg-blue-100 text-blue-800' : 
                      'bg-gray-100 text-gray-800'}`}
                  >
                    {id % 4 === 0 ? '已完成' : 
                      id % 4 === 1 ? '待发货' : 
                      id % 4 === 2 ? '已发货' : 
                      '已取消'}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                  <button className="text-blue-600 hover:text-blue-900 mr-3">
                    查看
                  </button>
                  <button className="text-green-600 hover:text-green-900">
                    处理
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        
        <div className="px-6 py-4 flex items-center justify-between border-t">
          <div className="text-sm text-gray-700">
            显示 <span className="font-medium">1</span> 到 <span className="font-medium">8</span> 条，共 <span className="font-medium">24</span> 条
          </div>
          <div className="flex gap-2">
            <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
              上一页
            </button>
            <button className="px-3 py-1 bg-blue-500 text-white rounded text-sm">
              1
            </button>
            <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
              2
            </button>
            <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
              3
            </button>
            <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>
  );
} 